<template>
    <el-button type="primary" @click="fetchUserData('')" >重置</el-button>
    <el-button type="warning" @click="lastDic" >返回</el-button>
    <br></br>
    <el-table
      :data="tableData"
      style="width: 100%"
      @row-click="handleRowClick"
    >
      <el-table-column
        prop="fileName"
        label="文件名"
        width="180"
      >
        <template v-slot="scope">
          <a v-if="scope.row.fileName.isFile" :href="scope.row.fileName.url" target="_blank">
            {{ scope.row.fileName.label }}
          </a>
          <a v-else>
            {{ scope.row.fileName.label }}
          </a>
        </template>
      </el-table-column>
  
      <el-table-column
        prop="size"
        label="大小"
        width="180"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="备注"
        width="180"
      >
      <template v-slot="scope">
          <div v-if="scope.row.fileName.isFile" >
            文件
          </div>
          <div v-else>
            文件夹
          </div>
      </template>
    </el-table-column>
    <el-table-column
        prop="directory"
        label="操作"
        width="180"
      >
      <template v-slot="scope">
        <el-button type="success" plain v-if="scope.row.fileName.isFile" @click="downloadFile(scope.row.fileName.url,scope.row.fileName.label)">
            下载
        </el-button>
        <el-button type="info" plain v-else @click="fetchUserData(scope.row.directory)">
            进入
        </el-button>
      </template>
    </el-table-column>
  
    </el-table>
  </template>
   
  <script>
  import axios from 'axios';
  
  export default {
    data() {
      return {
        tableData: [{
          fileName: {
            label: '..',
            url: 'http://127.0.0.1:8414/vv/log/downloadFile',
            isFile: false
          },
          size: '上一页',
          isFile: false,
          directory: "",
          address: ''
        }],
        baseUrl: 'http://47.100.60.197:8310/ks',
        // baseUrl: 'http://127.0.0.1:8310/ks',
        currentDic: '',
        dic: ''
      };
    },
    methods: {
      handleRowClick(row, column, event) {
        // 在这里处理你的点击事件
      },
      fetchUserData(dic) {
        console.log('dic:', dic);
        this.dic=this.currentDic;
        this.currentDic=dic;
        var baseUri=this.baseUrl+'/log/fileList';
        if (dic) {
          baseUri= baseUri+"/?dic="+encodeURIComponent(dic)
        }
        
        console.log('baseUri:', baseUri);
        
        axios.get(baseUri)
          .then(response => {
            // this.tableData = response.data.data;
            var htpData = response.data.data;
            console.log('htpData:', htpData);
  
            this.tableData = htpData.map(item => {
              return{
                fileName: {
                  label: item.name,
                  url: this.baseUrl+'/log/downloadFile?fileName=' + encodeURIComponent(item.directory),
                  isFile: item.isFile
                },
                size: item.size,
                directory: item.directory,
                isFile: item.isFile,
              }
            });
            console.log('pp:', this.pp);
  
            console.log('this.tableData:', this.tableData);
          })
          .catch(error => {
            console.error('请求用户数据出错:', error);
          });
      },
      downloadFile(url, name){
        console.log("下载点击了一下");
        fetch(url).then(_ => _.blob()).then(_ => {
          const link = document.createElement('a');
          link.href = URL.createObjectURL(_);
          link.setAttribute('download', name);
          link.click();
        })
      },
      inDic(){
        console.log("进入点击了一下");
      },
      lastDic(){
        console.log("啥呀 ");
        var currentDic = this.dic;
        console.log("sep = ",sep);
        this.fetchUserData(this.currentDic);
      }
    }
  };
  </script>